<template>
  <!-- 步骤条 -->
  <!-- 使用 $attrs 传入已在父组件中声明但在子组件中未被声明的 props，从而达到当父组件传入的 prop 时，父组件能直接使用子组件的原生属性 -->
  <!-- 使用 $listeners 传入已在父组件中注册但在子组件中未注册的事件，将父组件中出发的事件直接传递给子组件，从而达到父组件中传入的事件直接在子组件的原生事件中触发 -->
  <div class="hu-steps-box">
    <van-steps v-bind="$attrs" class="hu-steps" :active-color="$color.linearBlue">
      <van-step v-for="(step,index) in steps" :key="index">
        <template #active-icon>
          <span class="hu-step-active">{{index+1}}</span>
        </template>
        <template #inactive-icon>
          <span class="hu-step-inactive">{{index+1}}</span>
        </template>
        <template #finish-icon>
          <span class="hu-step-finish">
            <van-icon name="success" />
          </span>
        </template>
      </van-step>
    </van-steps>
    <div class="hu-steps-text">
      <span
        :class="index>$attrs.active?'hu-text-inactive':'hu-text-active'"
        v-for="(step,index) in steps"
        :key="index"
      >{{step}}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: "HuSteps",
  props: {
    // 步骤
    steps: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      defaultActive: 0,
    };
  },
};
</script>

<style lang="less" >
@import "@/less/color";
// 自定义步骤条样式
.hu-steps-box {
  height: 95px;
  background-color: @white;
  // 步骤条底部文字
  .hu-steps-text {
    display: flex;
    justify-content: space-between;
    padding: 12px 16px;
    .hu-text-inactive {
      color: #c8c9cc;
    }
    .hu-text-active {
      color: #37383a;
    }
  }

  // 步骤条
  .hu-steps {
    background-color: @white;
    padding: 0 34px 0 51px;
    width: 100%;

    .hu-step-active,
    .hu-step-inactive,
    .hu-step-finish {
      display: flex;
      justify-content: center;
      align-items: center;
      color: @white;
      position: absolute;
      top: -13px;
      left: -13px;
      width: 26px;
      height: 26px;
      border-radius: 50%;
      background: @gradient-blue;
    }
    .hu-step-inactive {
      background: #c8c9cc;
    }
    .van-step--horizontal .van-step__line {
      left: 9px;
      right: 26px;
      width: auto;
    }
  }
}
</style>